<template>
  <view class="normal-login-container">

    <view class="item-wrap" style="margin-bottom: 0">
      <view class="lineBottom10">
        <uni-section title="年检信息" type="line"/>
      </view>

      <view style="margin: 8rpx 20rpx 8rpx 20rpx">
        <uni-forms ref="ruleForm" :rules="rules" :label-position="boole ? 'top' : 'left'" :model="ruleForm"
                   labelWidth="auto">
          <uni-forms-item label="本次年检时间:" name="inspectionTime" :required="boole">
            <text class="inspectionTime"/>
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择本次年检时间"
                                 return-type="string" v-model="ruleForm.inspectionTime"/>
            <text v-else> {{ ruleForm.inspectionTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="本次年检线上/线下:" name="onlineOffline" :required="boole">
            <text class="onlineOffline"/>
            <uni-data-select v-if="boole" v-model="ruleForm.onlineOffline" :localdata="range"
                             placeholder="请选择本次年检线上/线下"
                             :clear="true" filterable/>
            <text v-else> {{
                ruleForm.onlineOffline == '1' ? '线上' : ruleForm.onlineOffline == '2' ? '线下' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="是否我司年检:" name="isOurCompanyInspection" :required="boole">
            <text class="isOurCompanyInspection"/>
            <uni-data-select v-if="boole" v-model="ruleForm.isOurCompanyInspection" :localdata="rangeList"
                             placeholder="请选择是否我司年检"
                             :clear="true" filterable/>
            <text v-else> {{
                ruleForm.isOurCompanyInspection === '0' ? '是' : ruleForm.isOurCompanyInspection === '1' ? '否' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="预计下次年检到期日:" name="inspectionNextTime" :required="boole">
            <text class="inspectionNextTime"/>
            <uni-datetime-picker v-if="boole" type="date" placeholder="请选择预计下次年检到期日"
                                 :start="handleEffectDate(ruleForm.inspectionTime)"
                                 return-type="string" v-model="ruleForm.inspectionNextTime"/>
            <text v-else> {{ ruleForm.inspectionNextTime || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="预计下次年检线上/线下:" name="expireOnlineOffline" :required="boole">
            <text class="expireOnlineOffline"/>
            <uni-data-select v-if="boole" v-model="ruleForm.expireOnlineOffline" :localdata="range"
                             placeholder="请选择预计下次年检线上/线下"
                             :clear="true" filterable/>
            <text v-else> {{
                ruleForm.expireOnlineOffline == '1' ? '线上' : ruleForm.expireOnlineOffline == '2' ? '线下' : ''
              }}
            </text>
          </uni-forms-item>

          <uni-forms-item label="年检费:" name="inspectionPrice" :required="boole">
            <text class="inspectionPrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.inspectionPrice"
                           @clear="clear('inspectionPrice')"
                           @change="changeAmount('inspectionPrice')"
                           placeholder="请输入年检费"/>
            <text v-else> {{ ruleForm.inspectionPrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="年检代办费:" name="inspectionAgentPrice" :required="boole">
            <text class="inspectionAgentPrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.inspectionAgentPrice"
                           @clear="clear('inspectionAgentPrice')"
                           @change="changeAmount('inspectionAgentPrice')"
                           placeholder="请输年检代办费"/>
            <text v-else> {{ ruleForm.inspectionAgentPrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="综合检测费:" name="comprehensivePrice" :required="boole">
            <text class="comprehensivePrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.comprehensivePrice"
                           @clear="clear('comprehensivePrice')"
                           @change="changeAmount('comprehensivePrice')"
                           placeholder="请输入综合检测费"/>
            <text v-else> {{ ruleForm.comprehensivePrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="二维费用:" name="twoDimensionPrice" :required="boole">
            <text class="photoMailPrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.twoDimensionPrice"
                           @clear="clear('twoDimensionPrice')"
                           @change="changeAmount('twoDimensionPrice')"
                           placeholder="请输入二维费用"/>
            <text v-else> {{ ruleForm.twoDimensionPrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="其他费用:" name="otherPrice" :required="boole">
            <text class="photoMailPrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.otherPrice"
                           @clear="clear('otherPrice')"
                           @change="changeAmount('otherPrice')"
                           placeholder="请输入其他费用"/>
            <text v-else> {{ ruleForm.otherPrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item label="年检总金额:" name="inspectionAllPrice" :required="boole">
            <text class="inspectionAllPrice"/>
            <uni-easyinput v-if="boole" v-model="ruleForm.inspectionAllPrice"
                           disabled
                           placeholder="请输入年检总金额"/>
            <text v-else> {{ ruleForm.inspectionAllPrice || '-' }}</text>
          </uni-forms-item>

          <uni-forms-item name="inspectionIdenUrl" label="年检标识:" :required="boole">
            <text class="inspectionIdenUrl"/>
            <image-common :disabled="!boole" :up-type="2" v-model="ruleForm.inspectionIdenUrl"/>
          </uni-forms-item>

          <uni-forms-item name="inspectionInvoiceUrl" label="年检发票:" :required="boole">
            <text class="inspectionInvoiceUrl"/>
            <image-common :disabled="!boole" :up-type="2" v-model="ruleForm.inspectionInvoiceUrl"/>
          </uni-forms-item>

          <uni-forms-item label="附件:">
            <image-common :disabled="!boole" :up-type="2" v-model="ruleForm.attachmentUrl"/>
          </uni-forms-item>

          <uni-forms-item label="年检备注:">
            <uni-easyinput type="textarea" v-if="boole" :maxlength="490" v-model="ruleForm.remark" placeholder="请输入年检备注"/>
            <text v-else>{{ ruleForm.remark || '-' }}</text>
          </uni-forms-item>

        </uni-forms>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: "inspectionInfo", //年检信息
  dicts: ["online_offline"],
  props: {
    value: {
      type: Object,
      default: {},
    },
    boole: {
      type: Boolean,
      default: true,
    },
    index: {
      type: Number,
      default: -1,
    }
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    handleLabel() {
      return function (arr, type) {
        let name = "-";
        arr.map((v) => {
          if (type == v.value) {
            name = v.label;
          }
        });
        return name;
      };
    },
  },
  watch: {},
  data() {
    return {
      range: [
        {value: "1", text: "线上"},
        {value: "2", text: "线下"},
      ],
      rangeList: [
        {value: "0", text: "是"},
        {value: "1", text: "否"},
      ],
      rules: {
        inspectionTime: {
          rules: [
            {
              required: true,
              errorMessage: "请选择本次年检时间",
              validateTrigger: "bind",
            },
          ],
        },
        onlineOffline: {
          rules: [
            {
              required: true,
              errorMessage: "请选择本次年检线上/线下",
              validateTrigger: "bind",
            },
          ],
        },
        isOurCompanyInspection: {
          rules: [
            {
              required: true,
              errorMessage: "请选择是否我司年检",
              validateTrigger: "bind",
            },
          ],
        },
        inspectionNextTime: {
          rules: [
            {
              required: true,
              errorMessage: "请选择预计下次年检到期日",
              validateTrigger: "bind",
            },
          ],
        },
        expireOnlineOffline: {
          rules: [
            {
              required: true,
              errorMessage: "请选择预计下次年检线上/线下",
              validateTrigger: "bind",
            },
          ],
        },
        inspectionPrice: {
          rules: [
            {
              required: true,
              errorMessage: "请输入年检费",
              validateTrigger: "blur",
            },
          ],
        },
        inspectionAgentPrice: {
          rules: [
            {
              required: true,
              errorMessage: "请输年检代办费",
              validateTrigger: "blur",
            },
          ],
        },
        comprehensivePrice: {
          rules: [
            {
              required: true,
              errorMessage: "请输入综合检测费",
              validateTrigger: "blur",
            },
          ]
        },
        twoDimensionPrice: {
          rules: [
            {
              required: true,
              errorMessage: '请输入二维费用',
              validateTrigger: "blur",
            }
          ]
        },
        otherPrice: {
          rules: [
            {
              required: true,
              errorMessage: '请输入其他费用',
              validateTrigger: "blur",
            }
          ]
        },
        inspectionAllPrice: {
          rules: [
            {
              required: true,
              errorMessage: '请输入年检总金额',
              validateTrigger: "blur",
            }
          ]
        },
        inspectionIdenUrl: {
          rules: [
            {
              required: true,
              errorMessage: "上传年检标识",
              validateTrigger: "bind",
            },
          ],
        },
        inspectionInvoiceUrl: {
          rules: [
            {
              required: true,
              errorMessage: "上传年检发票",
              validateTrigger: "bind",
            },
          ],
        },
      },

    };
  },
  created() {
  },
  mounted() {

  },
  methods: {
    handleEffectDate(val) {
      let date = new Date(val)
      return date.setDate(date.getDate() + 1);
    },

    changeAmount(str) {
      if (!this.ruleForm[str]) return
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      if (!msg.test(this.ruleForm[str])) {
        this.ruleForm[str] = "";
      } else {
        let num = this.keepTwoDecimalPlaces(this.ruleForm[str])
        this.value[str] = this.ruleForm[str] = Number(num);

      }
      this.sumPrice();
    },

    clear(str) {
      this.value[str] = this.ruleForm[str] = ''
      this.sumPrice();
    },

    keepTwoDecimalPlaces: function (num) {
      return num.toString().match(/^\d+(?:\.\d{0,2})?/)[0];
    },


    sumPrice() {
      let total = 0;

      total = Number(this.handleBigInt((this.ruleForm.inspectionPrice)))
          + Number(this.handleBigInt((this.ruleForm.inspectionAgentPrice)))
          + Number(this.handleBigInt((this.ruleForm.comprehensivePrice)))
          + Number(this.handleBigInt((this.ruleForm.twoDimensionPrice)))
          + Number(this.handleBigInt((this.ruleForm.otherPrice)));
      this.ruleForm.inspectionAllPrice = this.value.inspectionAllPrice = total / 100;
    },

    handleBigInt(val) {
      if (val) {
        return (Number(val) * 100).toFixed(0);
      } else {
        return 0;
      }
    },


    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm
            .validate()
            .then((res) => {
              resolve();
            })
            .catch((err) => {
              let key = ".flex-col" + ">>>" + "." + err[0].key;
              if (this.index === -1) {
                reject(key);
              } else {
                reject({
                  e: key,
                  i: this.index
                });
              }

            });
      });
    },
  },
};
</script>

<style scoped lang=""></style>


